<template>
  <a-modal :title="title" :width="1200" :visible="visible" @cancel="handleCancel" cancelText="关闭" okText="下一项" style="top:20px;">
    <div ref="page" style="margin-top:30px">
      
      <div class="steps-content" style="margin:10px"> 
        <a-row>
          <a-col :span="6">
            <div class="down-tree" style="height:650px;overflow-y:auto;">
              <a-directory-tree   multiple default-expand-all :selectedKeys="selectedKeys" @select="onSelect" @expand="onExpand">
                <a-tree-node key="0-0" title="查阅（复印）档案登记表"  > 
                </a-tree-node>
                <a-tree-node key="0-1" title="申请文件"  :selectable="false"> 
                  <a-tree-node  :id="'sq'+index" :title='row.wjmc' is-leaf  v-for="(row, index) in treeData.sqdata" :key="'0-1-'+index"  /> 
                </a-tree-node>
               
                <a-tree-node key="0-2" title="申请复印文件" :selectable="false">
                  <a-tree-node  :id="'wj'+index" :title='row.wjmc' is-leaf  v-for="(row, index) in treeData.wjdata" :key="'0-2-'+index"/> 
                </a-tree-node>
              </a-directory-tree>

              <!-- <a-tree
                v-if="treeData.length > 0"
                :tree-data="treeData"
                default-expand-all 
                @select="onSelect"
                :replaceFields='replaceFields'
                :defaultExpandAll='defaultExpandAll'
                ref="tree" 
              >    
              </a-tree>   -->
            </div>
          </a-col>
          <a-col :span="18">
             <div class="down-tree" style="height:650px;overflow-y:auto;width: 97%;margin-left:5px;"><!-- border-radius: 10px;border: 1px dashed; -->
               <div v-if="lx == '信息'">
                <h1 style="text-align:center;">查阅（复印）档案登记表</h1>
                <table width="732" border="1">
                  <tr>
                    <td width="90" height="50" id="lineTd"><span style="float:left;margin-top:20px;margin-left: 10px;"><b>项目</b></span>  <span style="float:right;margin-top:0px;margin-right: 10px;"><b>日期</b></span></td>
                    <td width="71"  style="text-align:center;"><b >姓名</b></td>
                    <td width="145" style="text-align:center;"><b >身份证号</b></td>
                    <td width="154" style="text-align:center;"><b >入伍时间</b></td>
                    <td width="146" style="text-align:center;"><b >退伍时间</b></td>
                    <td width="110" style="text-align:center;"><b >联系电话</b></td>
                  </tr>
                  <tr>
                    <td height="45" style="text-align:center;"><b >查档对象</b></td>
                    <td style="text-align:center;">{{jyxxmodel.bjyrxm}}</td>
                    <td style="text-align:center;">{{jyxxmodel.bjyrsfzh}}</td>
                    <td style="text-align:center;">{{jyxxmodel.bjyrrwsj}}</td>
                    <td style="text-align:center;">{{jyxxmodel.bjyrtwsj}}</td>
                    <td style="text-align:center;">{{jyxxmodel.bjyrlxdh}}</td>
                  </tr>
                  <tr>
                    <td height="90" style="text-align:center;"><b >查档事由 <br />
                    及内容</b></td>
                    <td colspan="5"  style="text-align:center;">{{jyxxmodel.sqyy}}</td>
                  </tr>
                  <tr>
                    <td height="253" style="text-align:center;"><b >查档人承诺</b></td>
                    <td colspan="5"><p align="center" >承诺事项 </p>
                      <p >1、本人（本单位）在绥化市退役军人事务局查阅和复印的档案资料，仅供本人（本单位）参考引用，未经允许绝不以任何形式公布，以及提供给他人、转让使用权。 <br />
                        2、不得擅自摘抄、拍摄、复印档案资料。如因工作需要复印档案资料，须经科室负责人核对签字，加盖公章生效。 <br />
                        3、违反承诺条款，按照有关法律法规追究相应责任。 </p>
                      <p >&nbsp;</p>
                      <p >                             查档人签名：
                        <img :src="jyxxmodel.qmdata" alt="图片"  style="height:40px"  v-if="jyxxmodel.qmdata != '' && jyxxmodel.qmdata != null"/> 
                      </p>
                      <p >                             查档日期：{{jyxxmodel.create_time}}</p>
                    </td>
                  </tr>
                  <tr>
                    <td height="57" style="text-align:center;"><b >经办人签字</b></td>
                    <td colspan="5">
                      <img :src="jyxxmodel.jbrqmdata" alt="图片"  style="height:40px"  v-if="jyxxmodel.jbrqmdata != '' && jyxxmodel.jbrqmdata != null"/> 
                    </td>
                    
                  </tr>
                  <tr>
                    <td height="64" style="text-align:center;"><b >安置科 <br />
                    负责人签字</b></td>
                    <td colspan="5"> 
                      <img :src="jyxxmodel.shyhqmdata" alt="图片"  style="height:40px"  v-if="jyxxmodel.shyhqmdata != '' && jyxxmodel.shyhqmdata != null"/> 
                    </td>
                  </tr>
                </table>
                  <!-- <a-col :span="24">
                    <a-form-model-item label="借阅人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="jyr">
                      <a-input v-model="jyxxmodel.jyr" placeholder="请输入借阅人" style='width: 80%' disabled></a-input>
                      <a-button @click="generatePDF" type="primary" icon="print" style='left: 8px' v-if='jyxxmodel.zt==="审核通过" || jyxxmodel.zt === "复审核通过"'>复印档案</a-button> 
                    </a-form-model-item>
                  </a-col>   
                  <a-col :span="24">
                    <a-form-model-item label="被借阅人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bjyrxm">
                      <a-input v-model="jyxxmodel.bjyrxm" disabled ></a-input>
                    </a-form-model-item>
                  </a-col>  
                  <a-col :span="24">
                    <a-form-model-item label="申请原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="jyr">
                      <a-input v-model="jyxxmodel.sqyy" type="textarea"  disabled></a-input>
                    </a-form-model-item>
                  </a-col>   -->
               </div>
               <div v-if="lx == '文件'" style="text-align: center;" v-show="true" v-viewer="{movable: false}">
                  <img  :src="imageSrc" :alt="wjlist[sekectedIndex].wjmc" mode="aspectFit" style="height: 650px" :style="{ transform: 'rotate(' + angle + 'deg)' }"  />
<!--                  <img :src="wjlist[sekectedIndex].wjdz" :alt="wjlist[sekectedIndex].wjmc" mode="aspectFit" style="height: 650px" :style="{ transform: 'rotate(' + angle + 'deg)' }"  />-->

               </div>
            </div>
          </a-col>
        </a-row>
      </div>
      
    </div>
    <template slot="footer">
        <div>
          <a-button type="primary"  shape="circle" @click="ImgRotate(1)"  icon="redo" alt="顺时针旋转" v-if="lx == '文件'"></a-button>
          <a-button type="primary"  shape="circle" @click="ImgRotate(2)"  icon="undo" v-if="lx == '文件'"></a-button>
          <a-button type="primary"  shape="circle" @click="ImageUp"  icon="arrow-up" v-if="lx == '文件' && sekectedIndex > 0" ></a-button>
          <a-button type="primary"  shape="circle" @click="ImageDown" icon="arrow-down" v-if="lx == '文件' && sekectedIndex < wjlist.length -1"></a-button>
         <a-button type="primary"  shape="circle" @click="ImageFull" icon="fullscreen" v-if="lx == '文件'"></a-button>
         <a-button type="primary"  shape="circle" @click="printImg" icon="printer" v-if="lx == '文件'"></a-button> 
        </div>
      </template>
    <pdf-preview-modal ref="pdfPreviewModal"></pdf-preview-modal >
  </a-modal>

</template>

<script>
  import { ref } from 'vue';
  import Vue from 'vue'
  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue,pushIfNotExist, filterObj  } from '@/utils/util' 
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { mixinDevice } from '@/utils/mixin'
  import store from '@/store'
  import 'viewerjs/dist/viewer.css'
  import VueViewer from 'v-viewer'
  import Watermark from '@/utils/watermark'

  import watermark from 'watermarkjs/lib';
  import printJS from 'print-js'
  import jsPDF from 'jspdf'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import PdfPreviewModal from "@/views/jeecg/modules/PdfPreviewModal"
  import html2canvas from 'html2canvas'
  // import watermark from '@sangtian152/watermark';
  import axios from 'axios';
  // 全局配置
  VueViewer.setDefaults({
    zIndex: 9999, // 图片查看器的层级
    navbar: false, // 隐藏导航栏
    toolbar: {
      zoomIn: true,
      zoomOut: true,
      oneToOne: true,
      reset: true,
      play: true,
      rotateLeft: true, 
      rotateRight: true,
      flipHorizontal: true,
      flipVertical: true,
    },
  }) 
  Vue.use(VueViewer)
  export default {
    name: 'DaJyxx',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      PdfPreviewModal,
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        pdfDoc: null, // PDF文档对象
        waterMark:'',
        imageSrc:'',
        srcList:[],
        printImageList:[],  ///待打印的图片数组
        showImageViewer:false,
        angle: 0,//旋转角度
        xzkey:'',
        lx :'信息',
        id:'',
        selectedKeys:['0-0'], //选择节点 key
        sekectedIndex:0,  //选择文件顺序
        defaultExpandAll:true,
        spinning: false,
        delayTime: 500,
        btntxt:'下一项',
        title:'',
        visible: false,
        addOrEditForm: this.$form.createForm(this),
        current: 0,
        headers: { 
          'X-Access-Token':  store.getters.token
        }, 
        model:{
        }, 
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/dajy/daJyxx/add",
          edit: "/dajy/daJyxx/edit",
          // queryById: "/dajy/daJyxx/queryById",
          upload: window._CONFIG['domianURL'] +"/api/apiInfo/upload",
          jyml: "dajy/daJyxx/jymllist",
          queryById: "/dajy/daJyxx/queryById",
          list: "/mlwj/daMlwj/list",
          waterinfo:"/ap/apInfo/watermarkinfo",
        },  
        fileKey:"",
        treeData:[],
        replaceFields:{
          children:'children', title:'title', key:'key' // 看你的接口返回字段是什么，对应匹配就行了
        },  
        jyxxmodel:{
          id:"",
          createBy:"",
          createTime:"",
          bjyrxm:"",
          bjyrid:"",
          sqyy:"",
          updateBy:"",
          updateTime:"",
          sysOrgCode:"",
          pdf:"",
          czlx:"",
          jyr:"",
          zt:"", 
        }, 
        wjlist:[]
        
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      // setTimeout(() => {
      //   Watermark.set(store.getters.water , this.$refs.page)
        
      // }, 1000);
      // console.log("获取水印信息" + this.url.waterinfo);
      // this.waterMark = '';
      // httpAction(this.url.waterinfo,'','get').then((res)=>{
      //   if (res.success) {
      //     console.log("水印信息" + res.result);
      //     this.waterMark = res.result;
      //   }
      // }).finally(() => {
      // });
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));

    },
    mounted() {

    },
    methods: {
      generatePDF() {
        // 生成PDF的方法
        // 初始化PDF文档对象
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        // let contentWidth = 2068;
        // let contentHeight = 2969;
        // let imgWidth = 595.28;
        // let imgHeight = 592.28/contentWidth * contentHeight;
        // // 第一个参数： l：横向  p：纵向
        // // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
        // this.pdfDoc = new jsPDF("p", "pt")
        // for (let i = 0; i < this.printImageList.length; i++) {
        //   this.pdfDoc.addImage(this.printImageList[i],"JPEG", 0, 0, imgWidth, imgHeight);
        // }
        // 保存PDF文档

        // this.pdfDoc.save('example.pdf')
        //直接打印文档，未测试
        // this.pdfDoc.autoPrint();
        // this.pdfDoc.output('save', 'filename.pdf'); //Try to save PDF as a file (not works on ie before 10, and some mobile devices)
        // this.pdfDoc.output('datauristring');        //returns the data uri string
        // this.pdfDoc.output('datauri');              //opens the data uri in current window
        // this.pdfDoc.output('dataurlnewwindow');     //opens the data uri in new window
        // console.log(this.pdfDoc.output('bloburl'));
        // this.pdfPreview(this.pdfDoc.output('bloburl'));
        // console.log(this.pdfDoc.output('datauristring'));
        window.open(this.jyxxmodel.pdf, '_blank');

      },

      pdfPreview:function(title){
        const token = Vue.ls.get(ACCESS_TOKEN);
        this.headers = {"X-Access-Token":token}
        this.$refs.pdfPreviewModal.previewFiles(title,token);
      },
      addWatermark(image) {
        // console.log("水印信息" + image);
        watermark([image.replace('http://192.168.2.7:8021','/watermark')])
          .image(watermark.text.lowerLeft(this.waterMark, '20px Arial', '#000000', 0.5))
          .then((img) => {
            // console.log(img.src)
            this.imageSrc = img.src;
          });
      },
      // addWatermark(image) {
      //   console.log('开始设置水印');
      //   const can = new watermark(image, {clip:{type: 'rect', padding: '10%'},fontSize:26,fillStyle:'#000000',globalAlpha:0.5,crossOrigin:true,});
      //   // console.log(can);
      //   can.addText('文字水印', {repeat: true, lineSpacing: 146, markSpacing: '50%' })
      //   can.addText('测试水印居中', {repeat: false, fontSize: 36, position: {right: '50%', bottom:  '50%'}, translate: '50%,50%'})
      //   // can.addImage(mark, {repeat: true, markHeight: 26, lineSpacing: 146, start: 36})
      //   can.draw(function() {
      //     console.log('水印设置成功')
      //     console.log(can.getBase64())
      //     this.imageSrc = can.getBase64()
      //   })
      // },
      closePre(){
        this.showImageViewer = false;
      },
      // 打印类型
      printType(type) {
        switch (type) {
          case 'ALLINFO':
            printJS({
              type: 'image',
              showModal:true,
              modalMessage:'正在加载档案文件，请稍后……',
              honorMarginPadding: false,
              // maxWidth:800,
              // display: block;page-break-after: always;margin: 0 auto;
              imageStyle:'width:98.6%;margin:0;margin-left:0px;margin-top:0px;margin-bottom:0px;text-align:center;top:0;bottom:0;left:0,right:0',
              // Style:'width:98.6%;margin:0;margin-left:0px;margin-top:0px;margin-bottom:0px;text-align:left;top:0;bottom:0;left:0,right:0',
              // header:null,
              // maxWidth:1920,
              footer:null,
              headers:null,
              marginTop:0,
              marginBottom:0,
              marginLeft:0,
              marginRight:0,

              // maxWidth:2480,
              // minHeight:3508,
              margin:0,
              printable: this.printImageList,
              // printable:['http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg',
              //   'http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg',
              //   'http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg',
              //   'http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg',
              //   'http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg'],
              documentTitle: '',
              header: '',
              //         style:`@page {size:98%;margin:0;margin-top:5px; margin-left:0px; margin-right: 0px;margin-bottom: 5px;}
              // thead th {
              //   border-top: 0px solid #000;
              //   border-right: 0px solid #000;
              //   border-left: 0px solid #000;
              //   border-bottom: 0px solid #000;
              // }
              // tbody td {
              //   border: 0px solid #000;
              // }
              // tbody {
              //   text-align: center;
              // }
              // table {
              //   border-collapse: collapse;
              // }`,
              // imageStyle: 'width:100%;margin-bottom:0px;'
            })
            break
          case 'onePicture':
            printJS({
              type: 'image',
              printable: [logo],
              documentTitle: '打印图片',
            })
            break
          case 'allPicture':
            printJS({
              type: 'html',
              printable: 'imgPrint',
              documentTitle: '打印图片',
            })
            break
          case 'json':
            printJS({
              type: 'json',
              documentTitle: '打印表格',
              printable: this.tableData,
              // 打印json时传入的表头名称(必传)，要和json中的键值对的键保持一致
              properties: [
                { field: 'title', displayName: '活动' },
                { field: 'decs', displayName: '描述' },
                { field: 'state', displayName: '状态' },
                { field: 'created_at', displayName: '活动日期' },
              ],
              // 打印JSON时，表格的自定义样式
              gridStyle: 'text-align: left;border: 1px solid lightgray;font-size: 12px; line-height: 26px;',
              gridHeaderStyle: 'font-weight: 500; border: 1px solid lightgray; line-height: 30px;',
            })
            break
          case 'html':
            printJS({
              type: 'html',
              printable: 'allPage',
              documentTitle: '打印html页面',
              // 写入自定义样式
              style: `
            th, td{ text-align: left; border: 1px solid lightgray; font-size: 12px; padding: 0 10px;}
            .el-button{ border: 1px solid #62afe3; margin-right: 20px;}
            .img-container{ margin: 20px 0;}
            .config-container{ padding-top: 30px;}
            .config-title{ margin-bottom: 10px;}
            .problem{ margin-top: 100px; border-left: 10px solid #42b983;  background: #f5f7fa; padding: 20px;}
            `
            })
            break
          case 'pdf':
            console.log('打印pif')
            printJS({
              type: 'pdf',
              printable: ['bbb.pdf']
              // documentTitle: '打印图片',
            })
            break
        }
      },
      handlClear(){
        this.selectedKeys =['0-0'], //选择节点 key
        this.sekectedIndex =0;  //选择文件顺序
        this.wjlist=[];
        this.printImageList = [];
        this.angle= 0,//旋转角度
        this.xzkey='';
        this.lx ='信息';
        this.id='';
      },
      ImageUp(){ 
         for(let i=0;i<this.wjlist.length;i++){
           if (this.wjlist[i].key == this.selectedKeys[0]){ 
            this.selectedKeys = [this.wjlist[i-1].key];
            this.sekectedIndex = i -1;
            this.xzkey = this.wjlist[i-1].key;
            break;
           }
         }
      }, 
      ImageDown(){ 
         for(let i=0;i<this.wjlist.length;i++){
           if (this.wjlist[i].key == this.selectedKeys[0]){ 
            this.selectedKeys = [this.wjlist[i+1].key];
            this.sekectedIndex = i + 1;
            this.xzkey = this.wjlist[i+1].key;
            break;
           }
         }
         
         // console.log(this.selectedKeys)
      }, 
      ImageFull(){
        this.srcList = [this.wjlist[this.sekectedIndex].wjdz]
        this.$viewerApi({
          images: this.srcList,
        })
        this.showImageViewer = true;
      },
      ImgRotate(l){
         switch(l){
          case 1: this.angle +=90; break;
          case 2: this.angle -=90; break;
         }
      },
      printImg(){ 
        printJS({
              type: 'image',
              showModal:true,
              modalMessage:'正在加载档案文件，请稍后……',
              honorMarginPadding: false,
              // maxWidth:800,
              // display: block;page-break-after: always;margin: 0 auto;
              imageStyle:'width:100%;margin:0;margin-left:0px;margin-top:0px;margin-bottom:0px;text-align:center;top:0;bottom:0;left:0,right:0',
              // Style:'width:98.6%;margin:0;margin-left:0px;margin-top:0px;margin-bottom:0px;text-align:left;top:0;bottom:0;left:0,right:0',
              // header:null,
              // maxWidth:1920,
              footer:null,
              headers:null,
              marginTop:0,
              marginBottom:0,
              marginLeft:0,
              marginRight:0,

              // maxWidth:2480,
              // minHeight:3508,
              margin:0,
              printable: this.wjlist[this.sekectedIndex].wjdz,
              style: '@page { size: auto;  margin: 0mm; }',
              // printable:['http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg',
              //   'http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg',
              //   'http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg',
              //   'http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg',
              //   'http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg','http://192.168.2.7:8021/2023-11-23/1700731546019c5cd18f0cfcfbc848639b2a7fbcb18a.jpg'],
              documentTitle: '',
              header: '',
              //         style:`@page {size:98%;margin:0;margin-top:5px; margin-left:0px; margin-right: 0px;margin-bottom: 5px;}
              // thead th {
              //   border-top: 0px solid #000;
              //   border-right: 0px solid #000;
              //   border-left: 0px solid #000;
              //   border-bottom: 0px solid #000;
              // }
              // tbody td {
              //   border: 0px solid #000;
              // }
              // tbody {
              //   text-align: center;
              // }
              // table {
              //   border-collapse: collapse;
              // }`,
              imageStyle: 'width:100%;margin-bottom:0px;'
            })
      },
      expandNodes(node) {
        node.expanded = this.expandAll;
        for (let i = 0; i < node.childNodes.length; i++) {
          node.childNodes[i].expanded = this.expandAll;
          if (node.childNodes[i].childNodes.length > 0) {
            this.expandNodes(node.childNodes[i]);
          }
        }
      },
      onSelect(keys, info) {
        // console.log('Trigger Select', keys, event);
        this.selectedKeys = [keys[0]]
        if (keys[0] == '0-0'){
          this.lx = "信息";
        }else{
          let sx = keys[0].split("-");
          if (sx[1] == "1"){
            // console.log(this.treeData.sqdata[sx[2]]);
            this.xzkey = keys[0];
          }
          if (sx[1] == "2"){
            // console.log(this.treeData.wjdata[sx[2]]);
            this.xzkey = keys[0];
          }
          for (let i = 0; i < this.wjlist.length; i++) {
             if (this.wjlist[i].key == keys[0]){
               this.sekectedIndex = i;
              //  this.addWatermark(this.wjlist[this.sekectedIndex].wjdz);
               this.imageSrc = this.wjlist[this.sekectedIndex].wjdz;
               break;
             }
          }
          // console.log(this.sekectedIndex);
          this.lx = "文件"
        }
      },
      onExpand() {
        // console.log('Trigger Expand');
      }, 
      handleCancel() { 
        this.close()
      },
      close () {
        this.handlClear();
        this.$emit('close');
        this.visible = false;
      },   
      getryxx(){ 
        httpAction(this.url.queryById+"?id="+this.id,'','get').then((res)=>{ 
           console.log("返回信息",res)
           if (res.code == "0" && res.data.length>0){
            this.jyxxmodel = res.data[0];
           }else{
            this.$message.error("查无该人信息");
           }
          }).finally(() => { 
        })
      },  
      getrylist(){ 

        this.spinning = true 
        this.treeData = [];
        httpAction(this.url.jyml+"?id="+this.id,'','post').then((res)=>{ 
           this.treeData = res;
           // console.log("返回信息",res)
           for(let i=0;i<this.treeData.sqdata.length;i++){
            let data = {
              key:'0-1-'+i,
              id:this.treeData.sqdata[i].id,
              wjdz:this.treeData.sqdata[i].wjdz, 
              wjmc:this.treeData.sqdata[i].wjmc,
              create_time:this.treeData.sqdata[i].create_time,
              realname:this.treeData.sqdata[i].realname,
              wjml:'',
             }
            this.wjlist.push(data);
           }
           for(let i=0;i<this.treeData.wjdata.length;i++){
            let data = {
              key:'0-2-'+i,
              id:this.treeData.wjdata[i].id,
              wjdz:this.treeData.wjdata[i].wjdz, 
              wjmc:this.treeData.wjdata[i].wjmc,
              create_time:this.treeData.wjdata[i].create_time,
              realname:this.treeData.wjdata[i].realname, 
              wjml:this.treeData.wjdata[i].wjml,
             }
            this.wjlist.push(data);
            this.printImageList.push(data.wjdz.replace('/thumbnail',''));
           }
          
           // console.log("列表",this.wjlist);
          }).finally(() => { 
            this.spinning = false;
        }) 
      }, 
      handleUpload(e){

      }, 
      show(id) { 
        this.visible = true;
        this.current = 0; 
        this.id = id;
        this.getryxx();
        this.getrylist(); 
        this.addOrEditForm.resetFields();  
        
        // let bb = aa.children[1]

        // bb.click()

        this.visible = true;
      },
      imageView () {
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        
        const that = this;
        if (this.data.filelist.length == 0){
          this.$message.error("请提交申请文件");
          return;
        }
        if (this.data.xzdawjlist.length == 0){
          this.$message.error("请选择档案文件");
          return;
        }
        httpAction(this.url.add,this.data,'post').then((res)=>{ 
          // console.log(res)
          if(res.code == "0"){
            this.$emit('ok');
            this.close(); 
          }
          }).finally(() => { 
        })   
       
      },
    }
  }
</script>
<style>
  .ant-upload.ant-upload-drag{
    height:200px
  }
  .ant-card{
    height:100%
  }
  .ant-modal-body{
    padding: 10px;
  }
  .ant-card-body{
    padding: 10px;
  }
  .ant-tree-treenode-selected{
    color:#fff    
  }
  #lineTd { background: #fff url() no-repeat 100% center; }
</style>